<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Babylon.js加载模型文件</title>
		<style>
			html,
			body {
				overflow: hidden;
				width: 100%;
				height: 100%;
				margin: 0;
			}

			canvas {
				width: 100%;
				height: 100%;
				-ms-touch-action: none;
				touch-action: none;
			}
		</style>
	</head>
	<body>
		<canvas id="renderCanvas"></canvas>
		<script src="babylon/js/babylon.js"></script>
		<script src="babylon/js/babylonjs.loaders.min.js"></script>
		<script>
			window.addEventListener('DOMContentLoaded', function() {
				//获取渲染容器对象
				var canvas = document.getElementById('renderCanvas');
				//加载渲染引擎 Engine 类负责低级别的 API 接口。第一个参数为渲染容器对象，第二个参数是开启抗锯齿
				var engine = new BABYLON.Engine(canvas, true);
				// 基本的场景对象
				var scene = new BABYLON.Scene(engine);
				// 半球光对象，朝向天空
				var light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
				// 弧度旋转相机，参数含义为：α角度、β角度、半径、目标方向、场景对象。
				var camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 10, new BABYLON.Vector3(40, 40, 40), scene);
				// 相机设置在原点位置
				camera.setTarget(BABYLON.Vector3.Zero());
				// 把相机附在渲染对象上
				camera.attachControl(canvas, false);
				// 把 模型 对象附加在现有的场景对象上
				// 可以从文件夹中选取对象，也可以给出一个 URL
				/* BABYLON.SceneLoader.ImportMesh(null, "/model/", "model.glb", scene, function(meshes, particleSystems, keletons) {
					
				}); */
				BABYLON.SceneLoader.Append("/model/", "model.glb", scene, function(scene) {
					// 修改默认环境颜色
					// scene.clearColor = BABYLON.Color3.Gray();
					// 透明环境背景
					// scene.autoClear = false;
					// scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
					// 创建默认相机 自适应模型位置
					// 第一个参数 默认false 创建一个自由摄影机，为true时创建一个弧形旋转摄影机；
					// 第二个参数 默认false 当为true时，创建的相机将替换现有的活动相机；
					// 第三个参数 默认false 当为true时，将控件附加到画布。
					scene.createDefaultCamera(true, true, true);
					// 获取当前相机对象
					var helperCamera = scene.activeCamera;
					// 设置相机缩放精度 数值越大 每次滚动滚轮缩放比例变化越小
					helperCamera.wheelPrecision = 100;
					// 限制相机最大缩放比例
					helperCamera.upperRadiusLimit = 20;
					// 缩放相机
					helperCamera.radius = 4;
					// 旋转相机
					helperCamera.alpha = Math.PI / 2;
					helperCamera.beta = Math.PI / 2.5;
					// 默认光源 当为true时，创建的灯光将替换所有现有的灯光；当为false且不存在现有灯光时，将创建半球形灯光；当false和灯光已经存在时，不会对场景进行任何更改。
					scene.createDefaultLight(true);
					// 向场景中添加天空盒和地面，设置各种环境参数，并将环境辅助对象返回到场景中。
					var helper = scene.createDefaultEnvironment({
						groundTexture: '/babylon/environments/backgroundGround.png',
						skyboxTexture: '/babylon/environments/backgroundSkybox.dds',
						environmentTexture: '/babylon/environments/environmentSpecular.env'
					});
					// 修改默认环境颜色
					helper.setMainColor(BABYLON.Color3.Gray());
				});

				//注册渲染循环 这些代码非常重要，场景是需要循环渲染的
				engine.runRenderLoop(function() {
					scene.render();
				});
				//实现容器自动缩放
				window.addEventListener('resize', function() {
					engine.resize();
				});
			});
		</script>
	</body>
</html>